<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  
    <title>导航栏</title>
    <!--<link rel="stylesheet" href="css/mystyle.css" />-->
    <style>
      *{
        margin: 0;
        padding: 0;
      }
      body{height: 2800px; background: #ccc;}
      a,a:link,a:visited,a:active,a:hover{
        text-decoration: none;
        color: inherit;
      }
      .sy-header{
        width: 100%;
        min-width: 1000px;
        height: 80px;
        position: fixed;
        top: 0;
        left: 0;
        background-color: transparent;
        z-index: 1000;
        color: #fff;
      }
      .sy-header.sy-opaque{
        background-color: #fff;
        color: #000;
        box-shadow: 0 1px 2px 2px rgba(0,0,0,.25);
      }
      .sy-head{
        width: 100%;
        min-width: 1000px;
        height: 80px;
        position: relative;
      }
      .sy-bar{
        width: 1000px;
        height: 80px;
        margin: 0 auto;
        padding: 0 90px;
        box-sizing: border-box;
      }
      .sy-bar .sy-logo{
        height: 80px;
        line-height: 80px;
        float: left;
      }
      .sy-bar .sy-bar-menu{
        list-style: none;
        float: right;
      }
      .sy-bar .sy-bar-menu li{
        float: left;
      }
      .sy-bar .sy-bar-menu li>a{
        display: block;
        padding: 0 24px;
        height: 80px;
        line-height: 80px;
        box-sizing: border-box;
        font-size: 18px;
        text-shadow: 1px 1px 1px rgba(0,0,0,.1);
      }
      .sy-header li.active,.sy-header li:hover{
        background-color: rgba(255,255,255,.21);
        border-bottom: 2px solid #fff;
        box-sizing: border-box;
      }
      .sy-header.sy-opaque li.active,.sy-header.sy-opaque li:hover{
        background-color: #029fe4;
        border-bottom: 0;
        color: #fff;
      }
      .sy-bar .sy-bar-menu li:hover .sy-bar-child{
        display: block;
      }
      .sy-header .sy-bar-child{
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        bottom: -38px;
        background-color: transparent;
      }
      .sy-header.sy-opaque .sy-bar-child{
        background: url(images/border_top.png) top repeat-x;
        background-color: #fff;
        color: #000;
      }
      .sy-header .sy-bar-child-menu{
        height: 40px;
        line-height: 40px;
        width: 1000px;
        padding-left: 160px;
        box-sizing: border-box;
        margin: 0 auto;
      }
      .sy-header .sy-bar-child-menu a{
        display: inline-block;
        font-size: 16px;
        padding: 0 20px;
        box-sizing: border-box;
        text-shadow: 1px 1px 1px rgba(0,0,0,.1);
      }
      .sy-header .sy-bar-child-menu a:hover,.sy-header .sy-bar-child-menu a.active{
        border-bottom: 1px solid #fff;
      }
      .sy-header.sy-opaque .sy-bar-child-menu a:hover,.sy-header.sy-opaque .sy-bar-child-menu a.active{
        border-bottom: 0;
        color: #029fe4;
      }
    </style>
  </head>
  <body>
    
    
    <div class="sy-header" id="sy-header">
      <div class="sy-head">
        <div class="sy-bar">
          <div class="sy-logo">
            <a href="{:U('index')}">
              <h1>LOGO</h1>
            </a>
          </div>
          <ul class="sy-bar-menu">
            <li>
              <a href="{:U('index')}">首页</a>
            </li>
            <li>
              <a href="{:U('store_process')}">功能</a>
              <div class="sy-bar-child">
                <div class="sy-bar-child-menu">
                  <a href="{:U('store_process')}">店面流程</a>
                  <a href="{:U('report_management')}">报表与管理</a>
                  <a href="{:U('member')}">会员</a>
                  <a href="{:U('marketing')}">营销与推广</a>
                  <a href="{:U('micro_shop')}">微店铺</a>
                  <a href="{:U('boss_assistant')}">老板助手</a>
                </div>
              </div>
            </li>
            <li>
              <a href="{:U('offer')}">设备与价格</a>
            </li>
            <li><a href="{:U('service')}">城市服务商</a></li>
            <li><a href="{:U('about_us')}">关于我们</a></li>
          </ul>
        </div>
      </div>
    </div>
    
    
    
    
            
            
            
            
    
    
    
    
    
    
    
    
    <script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
    <script>
      $(function(){
        $('.child-menu').mouseenter(function(){
          $('.sy-bar-child').show();
        });
        var h = $(window).scrollTop();
        if( h > 10){
          $("#sy-header").addClass('sy-opaque');
        }
        $(window).scroll(function(){
          var height = $(window).scrollTop();
          var opacity = height / 600;
          opacity = opacity > 1 ? 1 : opacity;
          if(height > 2){
            $("#sy-header").addClass('sy-opaque');
            $("#sy-header").css('opacity',opacity);
          }else{
            $("#sy-header").removeClass('sy-opaque');
            $("#sy-header").css('opacity',1);
          }
        });
      });
    </script>
  </body>
</html>